<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>添加文章</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <link href="/lib/css/bootstrap.min.css" rel="stylesheet">
    <link href="/lib/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/lib/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <ul class="nav nav-tabs page-tabs">
                    <li class="active"> <a href="#!">添加新经验</a> </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active">
                        <!--                            <div class="form-group">-->
                        <!--                                <label for="web_title"><h4><b>作者</b></h4></label>-->
                        <!--                                <input class="form-control" type="text" id="web_name" name="web_title" th:value="${user.username}" value="发表人" placeholder="发表人" >-->
                        <!--                            </div>-->
                        <!--                        <form action="#!" method="post" name="edit-form" class="edit-form">-->
                        <div class="form-group">
                            <label for="web_title"><h4><b>标题</b></h4></label>
                            <input class="form-control" type="text" id="web_title" name="web_title" th:value="${ctrain.title}" value="请输入文章标题" placeholder="请输入文章标题" >
                        </div>
                        <div class="form-group">
                            <label for="text"><h4>正文</h4></label>
                            <textarea class="form-control" id="text" rows="5" name="text" th:value="${ctrain.primary}" value="请输入文章内容" placeholder="请输入文章内容" > </textarea>
                            <small class="help-block">文本内容</small>
                        </div>
                        <div class="form-group">
                            <div class="form-group col-md-12">
                                <label for="web_logo">上传图片</label>
                                <div class="form-controls">
                                    <ul class="list-inline clearfix lyear-uploads-pic">
                                        <li class="col-xs-4 col-sm-3 col-md-2">
                                            <figure>
                                                <img id="web_logo" src="#" alt="图片">
                                            </figure>
                                        </li>
                                        <br>
                                        <li class="col-xs-4 col-sm-3 col-md-2">
                                            <form name="form0" id="form0" enctype="multipart/form-data">
                                                <input type="file" name="file" id="file0" multiple="multiple" /><br>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="form-group col-md-12">
                                <label for="web_copy">上传附件</label>
                                <div class="form-controls">
                                    <ul class="list-inline clearfix lyear-uploads-pic">
                                        <li class="col-xs-4 col-sm-3 col-md-2">
                                            <figure>
                                                <div id="web_copy" name="附件" placeholder="附件" th:value="${ctrain.copy}"></div>
                                            </figure>
                                        </li>
                                        <li class="col-xs-4 col-sm-3 col-md-2">
                                            <form name="copy_form" id="copy_form" enctype="multipart/form-data">
                                                <input type="file" name="file" id="copy_file0" multiple="multiple" /><br>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary m-r-5" target-form="add-form" onclick="subfrom()">确 定</button>
                            <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                        </div>
                        <!--                        </form>-->
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>
<input type="hidden" id="fileurl" value="">
<input type="hidden" id="mid" th:value="${mid}">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>


<script>
    var imgurl=""
    var fileurl=""
    /*上传前图片展示*/
    $("#file0").change(function(){
        var type=this.files[0].name;
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        var fileType = type.substr(type.length - 4, type.length);
        if (fileType == '.bmp' || fileType == '.jpg' || fileType == '.tif' ||
            fileType == '.gif' || fileType == '.png' || fileType == '.pcx'  ||
            fileType == '.tga'|| fileType == '.exif'|| fileType == '.fpx'   ||
            fileType == '.svg'|| fileType == '.psd'|| fileType == '.cdr'   ||
            fileType == '.pcd' ) {
            $.ajax({
                url: '/file/upload',//上传地址
                type: 'POST',
                cache: false,
                data: new FormData($('#form0')[0]),//表单数据
                processData: false,
                contentType: false,
                success: function (rtn) {
                    if (rtn.status == 'error') {
                        alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")　　//根据后端返回值,回显错误信息
                    } else {
                        /*上传成功*/
                        imgurl="https://"+rtn.name;
                    }
                }
            });
            console.log(imgurl)
            $("#web_logo").attr("src",objUrl)
        }else {
            alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")
        }


    }) ;
    /*上传前附件展示*/
    $("#copy_file0").change(function(){
        var type=this.files[0].name;
        var objUrl = getObjectURL(this.files[0]) ;//获取文件信息
        var fileType = type.substr(type.length - 4, type.length);
        if (fileType == '.txt' || fileType == '.sql' || fileType == '.lxsx' ) {
            $.ajax({
                url: '/file/upload',//上传地址
                type: 'POST',
                cache: false,
                data: new FormData($('#copy_form')[0]),//表单数据
                processData: false,
                contentType: false,
                success: function (rtn) {
                    if (rtn.status == 'error') {
                        alert("*上传文件类型错误,支持类型:bmp，jpg，png，tif，gif，pcx，tga，exif，fpx，svg，psd，cdr，pcd")　　//根据后端返回值,回显错误信息
                    } else {
                        /*上传成功*/
                        fileurl="https://"+rtn.name;
                        $("#fileurl").val(fileurl)
                    }
                }
            });
            console.log(fileurl)
            console.log( $("#fileurl").val())
        }else {
            alert("*上传文件格式错误。")
        }


    }) ;
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL!=undefined) {
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }

    /*代码上传*/
    function subfrom() {

        subimg()
    }

    function subimg() {
        if( imgurl.length>0&&fileurl.length>0){
            $.ajax({
                url:"c_date",
                type:'post',
                data:{
                    id:$("#pid").val(),
                    title:$("#web_title").val(),
                    primary:$("#text").val(),
                    picture:imgurl,
                    copy:fileurl,
                    state:$("#web_state").val(),
                    mid:$("#mid").val()
                },
                datatyp:'json',
                success:function (message) {
                    if (message.code==0){
                        //正确
                        alert("更新成功！")
                    }else {
                        alert("更新失败！")
                    }
                }
            })
        }else {
            alert("更新失败！")
        }
    }

</script>
<script type="text/javascript" src="/lib/js/jquery.min.js"></script>
<script type="text/javascript" src="/lib/js/bootstrap.min.js"></script>
<!--标签插件-->
<script src="/lib/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/lib/js/main.min.js"></script>
</body>
</html>
